<template>
  <div class="topbar">
     <div class="logo">
       <span>网抑云音乐</span>
     </div>
     <div class='input'>
      <el-input
        placeholder="请输入内容"
        prefix-icon="el-icon-search"
        @keyup.enter.native='seachinfo'
        v-model="searchdata">
      </el-input>
     </div>
  </div>
</template>

<script>
  export default {
      name:'hearbar',
      data () {
        return {
          searchdata:''
        }
      },
      methods:{
       async seachinfo(){
         
         this.$router.push(`result?keywords=${this.searchdata}`)
      }
      }
  }
</script>
<style lang="less" scoped>
.topbar{
  position: fixed;
  z-index: 15;
  top: 0px;
  width: 100%;
  height: 50px;
  display: flex;
  background-color: #eee;
  justify-content: space-between;
  line-height: 50px;
  .logo{
     margin-left: 150px;
     font-size: 25px;
     font-weight: bolder;
  }
  .input{
    .el-input{
      margin-right: 150px;
      border-radius: 5px;
      width: 240px;
      border-radius: 30px;
      border-style: none;
      text-indent: 0.5em;
    }
  }

}
.logo::before{
  position: relative;
  top: 10px;
  content: '';
  display: inline-block;
  width: 38px;
  height: 38px;
  background: url('~assets/img/logomusic.png') no-repeat;
}
</style>